{% extends "cashflow/base.html" %}
{% load humanize %}

{% block addition_header %}
<script type="text/javascript" src="/static/dataTables/js/jquery.dataTables.min.js"></script>
<link type="text/css" href="/static/dataTables/css/jquery.dataTables.css" rel="stylesheet" />
<script src="/static/amcharts/amstock.js" type="text/javascript"></script>
<link rel="stylesheet" href="/static/amcharts/style.css" type="text/css">   
{% endblock %}

{% block nav %}
  {% include "cashflow/nav.html" %}
{% endblock %}

{% block subnav %}

{% endblock %}


{% block toolbar %}
Projected Balances
{% endblock %}


{% block content %}

<h2>Projected Balances in next 12 months</h2>

<div id="datachart" style="width: 100%; height: 250px;"></div>

<table class="data" id="datatable" style="font-size:12px;">
  <thead>
    <tr>
      <th>Date</th>
      <th>Account</th>  
      <th>Category</th>
      <th>Name</th>
      <th>Amount</th>
    </tr>
	</thead>
	<tbody>

  </tbody>
	<tfoot>
		<tr>
      <th>Date</th>
      <th>Account</th>  
      <th>Category</th>
      <th>Name</th>
      <th>Amount</th>
		</tr>
	</tfoot>  
</table>
<script type="text/javascript" charset="utf-8">
  var rawData = [
                {% for item in bills %}{
                  datetime: new Date({{ item.date|date:"Y" }},{{ item.date|date:"m" }}-1,{{ item.date|date:"d" }}),
                  date: "{{ item.date|date:"Y-m-d" }}",
                  account: "{{item.account}}",
                  category: "{{item.category}}",
                  name: "{{item.name}}",
                  amount: {{item.amount|floatformat:2}}
                  }{% if not forloop.last %},{% endif %}
                {% endfor %}
                ];

  $(document).ready(function() {
    $('#datatable').dataTable( {
      "bProcessing": true,
      "aaData": rawData,
      "aoColumns": [
        { "sTitle": "Date",  "mDataProp": "date" },
        { "sTitle": "Account",  "mDataProp": "account" },
        { "sTitle": "Category",  "mDataProp": "category" },
        { "sTitle": "Name",  "mDataProp": "name" },
        { "sTitle": "Amount",  "mDataProp": "amount" }
      ]
    } );
  } );  
  
  
  

  // Parse data
  function groupDataByDate(rawData) {
      var chartData = [];
      var pdate;
      var pdatetime;
      var last_balance = 0;
      for (var row in rawData ) {
          if (!pdate){
            pdate = rawData[row].date;
            pdatetime = rawData[row].datetime;
            last_balance += rawData[row].amount;
          }
          if (pdate != rawData[row].date){
          
            chartData.push({
                datetime: pdatetime,
                balance: last_balance.toFixed(2)
            });  
          
            pdate = rawData[row].date;
            pdatetime = rawData[row].datetime;
            last_balance += rawData[row].amount;
            }
           
          
      }
      chartData.push({
          datetime: pdatetime,
          balance: last_balance.toFixed(2)
      });          
      return chartData;
  }    
    
  // Summary Chart
  AmCharts.ready(function () {
    var chart;
    var chartData = groupDataByDate(rawData);
    //var chartData = rawData;
    var temp;
    
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.panEventsEnabled = true;
    chart.dataProvider = chartData;
    chart.categoryField = "datetime";
    //chart.plotAreaBorderColor = "#DADADA";
    chart.plotAreaBorderAlpha = 1;
    chart.startDuration = 1;
    chart.columnSpacing = 0;

    
    // AXES
    // Category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set this to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to "DD"
    categoryAxis.dashLength = 2;
    categoryAxis.gridAlpha = 0.15;
    //categoryAxis.axisColor = "#DADADA";      

    // Value
    var valueAxisBalance = new AmCharts.ValueAxis();
    //valueAxisBalance.axisColor = "#FCD202";
    valueAxisBalance.axisThickness = 2;
    valueAxisBalance.gridAlpha = 0;
    valueAxisBalance.title = "Balance";
    chart.addValueAxis(valueAxisBalance);
    
    // GRAPHS
    var graphBalance = new AmCharts.AmGraph();
    graphBalance.valueAxis = valueAxisBalance;
    graphBalance.title = "Balance";
    graphBalance.valueField = "balance";
    graphBalance.balloonText = "Balance:[[value]]";
    graphBalance.lineThickness = 2;
    graphBalance.bullet = "round";
    graphBalance.bulletSize = 8;
    //graphBalance.bulletBorderColor = "#FFFFFF";
    graphBalance.bulletBorderThickness = 1; 
    graphBalance.lineColor = "#00D200";
    graphBalance.negativeLineColor = "#FF0000";
    chart.addGraph(graphBalance);
              
    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.zoomable = false;
    chartCursor.cursorPosition = "mouse";
    chart.addChartCursor(chartCursor);
       

    // WRITE
    chart.write("datachart");
  }
  
  
 
  );
    
    
</script>
{% endblock %}